const canvasElement = document.createElement('canvas');

canvasElement.width = 400;
canvasElement.height = 400;
canvasElement.style.backgroundColor = '#000';
document.body.appendChild(canvasElement);

const gl = canvasElement.getContext('webgl'); //3d 上下文对象


// 2、glsl程序代码
const vertexShaderSource = `
attribute vec2 a_position; // 顶点位置属性 每一条语句后的分号不能少
void main() {
  gl_Position = vec4(a_position, 0.0, 1.0); // 设置顶点位置
  gl_PointSize = 10.0; // 设置点的大小
}
`;

const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段的颜色
}`;

// 创建并编译着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建顶点着色器对象
gl.shaderSource(vertexShader, vertexShaderSource); //绑定着色器源码
gl.compileShader(vertexShader); //编译着色器源码


const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //创建片元着色器对象
gl.shaderSource(fragmentShader, fragmentShaderSource); //绑定着色器源码
gl.compileShader(fragmentShader); //编译着色器源码


// 创建并链接着色器程序
const program = gl.createProgram(); //创建程序对象
gl.attachShader(program, vertexShader); //附加编译好的顶点着色器
gl.attachShader(program, fragmentShader); //附加编译好的片元着色器
gl.linkProgram(program); //链接程序对象
gl.useProgram(program); //指定的程序对象设置为当前的渲染状态


const vertices = new Float32Array([
  -0.5, -0.5,  //第一个点的x,y坐标
  0.5, 0.5,  //第二个点的x,y坐标
])

const buffer = gl.createBuffer(); // 创建缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); // 填充缓冲区

const a_position_location = gl.getAttribLocation(program, 'a_position'); // 获取着色器中的变量的地址
gl.vertexAttribPointer(a_position_location, 2, gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT, 0); // 告诉 WebGL如何解析缓冲区中的数据
gl.enableVertexAttribArray(a_position_location); // 启用顶点属性数组
// 画线
gl.drawArrays(gl.LINES, 0, 2);






